<template>
  <view>
    <!-- 分类 -->
    <z-tabs
      ref="tabRef"
      :list="categoryData"
      :current="activeIdx"
      name-key="name"
      value-key="id"
      :scroll-count="1"
      :active-style="{ fontSize: '32rpx', marginLeft: '20rpx', marginRight: '20rpx', fontWeight: 800 }"
      :inactive-style="{ fontSize: '32rpx', marginLeft: '20rpx', marginRight: '20rpx' }"
      :bar-width="50"
      :bar-height="6"
      :bottom-space="0"
      :active-color="config.theme.color"
      :tabs-style="{ padding: '0 15rpx', height: '80rpx' }"
      bg-color="#fff"
      @change="changeTab"
    ></z-tabs>

    <!-- 列表 -->
    <z-paging
      ref="paging"
      v-model="videoList"
      :default-page-size="limit"
      :use-page-scroll="true"
      :to-bottom-loading-more-enabled="true"
      :auto="false"
      :fixed="false"
      :min-delay="1000"
      :show-loading-more-no-more-view="false"
      :refresher-enabled="false"
      :auto-hide-loading-after-first-loaded="false"
      @query="getData"
    >
      <view class="data-box">
        <view class="flex flex-wrap justify-between">
          <view
            class="video-box"
            v-for="(item, idx) in videoList"
            :key="idx"
            @click="nav.jump('/pages/video/detail?id=' + item.id)"
          >
            <view class="img-zone">
              <image
                class="video-poster"
                mode="aspectFill"
                lazy-load
                :lazy-load-margin="0"
                :src="`${item.poster}?imageView2/0/w/800/h/800`"
              ></image>
            </view>

            <view class="text-zone">
              <view class="video-desc">{{ item.description }}</view>
              <view class="flex justify-end pt-10rpx">
                <view class="flex items-center" @click.stop="setLike(idx)">
                  <image
                    class="like-icon"
                    v-show="item.is_like == 0"
                    src="@/static/icon/svg/video/love_line.svg"
                  ></image>
                  <image
                    class="like-icon"
                    v-show="item.is_like == 1"
                    src="@/static/icon/svg/video/love_active.svg"
                  ></image>
                  <text class="like-num">{{ item.like_num }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <template #loading>
        <view class="flex items-center justify-center h-500rpx">
          <mt-logo-loading :size="88"></mt-logo-loading>
        </view>
      </template>
    </z-paging>
  </view>
</template>

<script lang="ts" setup>
  import MtLogoLoading from '@/components/mt-loading/mt-logo-loading.vue';
  import { ref } from 'vue';
  import { getVideoCategory as getCategoryDataApi, getVideos as getDataApi, setVideoLike } from '@/api/video';
  import { report } from '@/utils/exception';
  import { config } from '@/config/env';
  import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app';
  import type { VideoItem } from '@/types/video';
  import type { CategoryList } from '@/types/base';
  import { nav } from '@/utils/homer';

  const tabRef = ref();
  const categoryData = ref<CategoryList[]>([]);
  const activeIdx = ref<number>(0);
  const videoList = ref<VideoItem[]>([]);
  const limit = 10;
  const paging = ref();

  const getData = (pageNo: number, pageSize: number) => {
    getDataApi(pageNo, pageSize, categoryData.value[activeIdx.value].id)
      .then((res) => {
        paging.value.complete(res.data.list);
      })
      .catch((err) => {
        report(err);
        paging.value.complete(false);
      });
  };

  const getCategoryData = () => {
    getCategoryDataApi()
      .then((res) => {
        categoryData.value = res.data.list;
        categoryData.value.unshift({ id: 0, name: '全部' });
        if (categoryData.value.length > 0) {
          paging.value.reload();
        }
      })
      .catch((err) => {
        report(err);
      });
  };
  getCategoryData();

  const changeTab = (index: number) => {
    activeIdx.value = index;
    paging.value.reload();
  };

  onReachBottom(() => {
    paging.value.doLoadMore();
  });

  // 点赞
  let timer: any;
  const setLike = (index: number) => {
    videoList.value[index].is_like = videoList.value[index].is_like == 0 ? 1 : 0;
    videoList.value[index].is_like == 1
      ? videoList.value[index].like_num++
      : videoList.value[index].like_num > 0
        ? videoList.value[index].like_num--
        : 0;
    clearTimeout(timer);
    timer = setTimeout(() => {
      setVideoLike(videoList.value[index].id, videoList.value[index].is_like)
        .then((res) => {})
        .catch((err) => {
          report(err);
          videoList.value[index].is_like = videoList.value[index].is_like == 0 ? 1 : 0;
          videoList.value[index].is_like == 1
            ? videoList.value[index].like_num++
            : videoList.value[index].like_num > 0
              ? videoList.value[index].like_num--
              : 0;
        });
    }, 500);
  };

  onShow(() => {
    uni.$once('syncVideoLike', (e) => {
      paging.value.reload();
    });
  });
</script>

<style>
  page {
    background: #f5f5f5;
  }
</style>

<style lang="scss" scoped>
  .data-box {
    display: flex;
    flex-direction: column;
    margin: 25rpx 20rpx 20rpx 20rpx;

    .video-box {
      display: flex;
      flex-direction: column;
      background: white;
      width: 346rpx;
      overflow: hidden;
      margin-bottom: 20rpx;
      border-radius: 15rpx;

      .img-zone {
        .video-poster {
          height: 346rpx;
          width: 100%;
        }
      }

      .text-zone {
        padding: 16rpx 15rpx;

        .video-desc {
          font-size: 26rpx;
          margin-bottom: 8rpx;
          font-weight: 600;
          height: 62rpx;
          letter-spacing: 1rpx;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          text-overflow: -o-ellipsis-lastline;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .like-icon {
          width: 32rpx;
          height: 32rpx;
        }
        .like-num {
          margin-left: 10rpx;
          font-size: 26rpx;
        }
      }
    }
  }
</style>
